<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    v-show="item.appId === currentModule.id"
                    :index="item[pathKey]"
                    :key="`${item[labelKey]} - ${item.appId} - ${item.parentId}`"
                    :class="{'is-active':vaildAvtive(item)}"
                    @click="open(item)">
        <i :class="['iconfont',item[iconKey]]"/>
        <span slot="title"
              :alt="item[pathKey]" style="font-size:14px !important;color:#333">{{generateTitle(item)}}</span>
      </el-menu-item>
      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                  v-show="item.appId === currentModule.id"
                  :index="item[pathKey]"
                  :key="`${item[labelKey]} - ${item.appId} - ${item.parentId}`">
        <template slot="title">
                <i :class="['iconfont',item[iconKey]]" v-if="first" style="color:#333"/>
          <i :class="['iconfont',item[iconKey]]" v-else/>
          <span slot="title" v-if="first"
                :class="{'el-menu--display':collapse && first}"  style="font-size:14px !important;color:#333">{{generateTitle(item)}}</span>
                <span slot="title" v-else
                :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item v-if="validatenull(child[childrenKey])"
                        :index="child[pathKey],cindex"
                        :class="{'is-active':vaildAvtive(child)}"
                        :key="`${child[labelKey]} - ${child.appId} - ${item.parentId}`"
                        @click="open(child)">
            <i :class="['iconfont',child[iconKey]]"/>
            <span slot="title">{{generateTitle(child)}}</span>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"
                        :props="props"
                        :screen="screen"
                        :collapse="collapse" />
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { validatenull } from '../../../util/validate'
import config from './config.js'
export default {
  name: 'SidebarItem',
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {}
      }
    },
    collapse: {
      type: Boolean
    }
  },
  data () {
    return {
      config: config
    }
  },
  created () { },
  mounted () { },
  computed: {
    ...mapGetters(['roles', 'currentModule', 'language']),
    labelKey () {
      if (this.language === 'en_US') return 'menuEnName'
      else return this.props.label || this.config.propsDefault.label
    },
    pathKey () {
      return this.props.path || this.config.propsDefault.path
    },
    iconKey () {
      return this.props.icon || this.config.propsDefault.icon
    },
    childrenKey () {
      return this.props.children || this.config.propsDefault.children
    },
    nowTagValue () {
      return this.$router.$avueRouter.getValue(this.$route)
    }
  },
  methods: {
    generateTitle (item) {
      if (this.language === 'en_US') return item.menuEnName
      return item.label
    },
    vaildAvtive (item) {
      const groupFlag = (item['group'] || []).some(ele =>
        this.$route.path.includes(ele)
      )
      return this.nowTagValue === item[this.pathKey] || groupFlag
    },
    vaildRoles (item) {
      item.meta = item.meta || {}
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true
    },
    validatenull (val) {
      return validatenull(val)
    },
    open (item) {
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      this.$router.$avueRouter.group = item.group;
      this.$router.$avueRouter.meta = item.meta;
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey],
          i18n: (item.meta || {}).i18n
        }),
        query: item.query
      });
      if (this.currentModule.frontHostUrl && process.env.NODE_ENV !== 'development' && window.location.href.split('#')[0] !== this.currentModule.frontHostUrl) {
        window.location.href = this.currentModule.frontHostUrl
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont{
  font-size: 14px !important;
  padding-right: 4px;
}
</style>